﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="HMS.PL.Forms.DemoGraph" ValidateRequest="false"
    EnableEventValidation="false" %>

<% Response.AddHeader("Pragma", "no-cache"); %>
<% Response.AddHeader("Cache-Control", "no-cache"); %>
<% Response.AddHeader("Cache-Control", "no-store"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="../Scripts/ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../Scripts/jsPlumb/jquery.jsPlumb-1.3.9-all-min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.contextMenu.js"></script>
    <script type="text/javascript" src="../Scripts/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../Scripts/ui/jquery-ui-1.8.16.custom.js"></script>
    <script type="text/javascript" src="../Scripts/ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="../Scripts/ui/jquery.ui.draggable.js"></script>
    <%--    <script type="text/javascript" src="../Scripts/ui/jquery-ui-1.8.21.custom.js"></script>--%>
    <script type="text/javascript" src="../Scripts/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../Scripts/formsScript/demoGraph.js"></script>
    <link type="text/css" rel="stylesheet" href="../Style/contextScreen.css" />
    <link type="text/css" rel="stylesheet" href="../Style/jquery.contextMenu.css" />
    <script type="text/javascript">

        jsPlumb.ready(function () {

            //debugger;
            document.onselectstart = function () { return false; };

            var exampleDropOptions = {
                tolerance: 'touch',
                hoverClass: 'dropHover',
                activeClass: 'dragActive'
            };

            var color2 = "#316b31";
            var exampleEndpoint = {
                paintStyle: { fillStyle: color2 },
                isSource: true,
                connectorStyle: { strokeStyle: color2, lineWidth: 8 },
                connector: ["Bezier", { curviness: 63}],
                maxConnections: 3,
                isTarget: true,
                dropOptions: exampleDropOptions,
                connectorOverlays: [["Arrow", { location: 0.45}]]
            };

            var overlays = [
                ["Arrow", { location: 0.45}]
            ];


            var exampleDropOptionsP = {
                tolerance: 'touch',
                hoverClass: 'dropHover',
                activeClass: 'dragActive'
            };

            var colorP = "#316b31";
            var exampleEndpointP = {
                paintStyle: { fillStyle: colorP },
                isSource: true,
                connectorStyle: { strokeStyle: color2, lineWidth: 1 },
                connector: ["Straight", { curviness: 13}],
                maxConnections: 3,
                isTarget: true,
                dropOptions: exampleDropOptionsP,
                connectorOverlays: [["Arrow", { location: 0.85}]]
            };

            var overlaysP = [
                ["Arrow", { location: 0.45}]
            ];
        });

    </script>

    <script type="text/javascript">

        $(document).ready(function () {

            var list_id = 9;
            //var arrColor = new Array("FloralWhite", "Aquamarine", "Burlywood", "CadetBlue", "Beige", "Gainsboro", "WhiteSmoke", "MidnightBlue", "Chocolate", "Coral");
            var arrColor = new Array("#C5DBEC");

            $.ajax({
                async: false,
                type: 'POST',
                url: "MasterCallback.aspx?operation=GetRelDataGraph&Mlist_id=" + list_id,
                data: "",
                // dataType: "json",
                success: function (str1) {
                    //debugger;
                    var arr = str1.split('^');
                    var res = arr[1];
                    var str = eval('(' + res + ')')

                    $("#container_0").empty();
                    $("#container_0").attr("list_id", list_id);
                    // $("#tmplGraph").tmpl(str).appendTo("#container_0");

                    for (i = 0, len = str.length; i < len; i++) {
                        // debugger;
                        var strDiv = "<div id=" + str[i].rel_col + " class='div' style='background-color:" + arrColor[0] + ";' onclick='divClick(\"" + str[i].rel_col + "\");' ParentId='null'>" + str[i].show_col + "</div>";
                        $("#container_0").append(strDiv);
                        $('#' + str[i].rel_col).bind("dblclick", divClick);
                        //bind context menu
                        ContextMenuBind(str[i].rel_col);
                    }
                },
                error: function (x, e) {
                    //debugger;
                    alert(x.readyState + " " + x.status + " " + e.msg);
                }
            });

            $(document).click(function () {
                $("#del-menu").hide();
            });

            $("#del-menu").click(function (action, el, pos) {
                // debugger;
                var target = action.target.id;

                if (target == "aRemove") {
                    var parId = $('div[id="' + $("#del-menu").attr("clickid") + '"]').attr("parentId");

                    if ($("#" + parId).length != 0) {
                        /////http://code.google.com/p/jsplumb/issues/detail?id=34
                        var connectionsDict =
                            jsPlumb.getConnections({ source: parId, target: $("#del-menu").attr("clickid") });

                        $(connectionsDict[0].endpoints).each(function (index) {
                            if ($(this)[0].elementId == parId) {
                                jsPlumb.removeEndpoint(parId, connectionsDict[0].endpoints[index]);
                            }
                        });

                        //connectionsDict[0].endpoints

                        //                    var i, thisConnection, thisEndpoint; // numConnections = connectionsDict.DEFAULT.length,
                        //                    var numConnections = 1;
                        // var targetEndpoint;

                        //                    for (i = 0; i < numConnections; i++) {
                        //                        debugger;
                        //                        thisConnection = connectionsDict[0];  // connectionsDict.DEFAULT[i];
                        //                        thisEndpoint = thisConnection.sourceEndpoint;
                        //                        targetEndpoint = thisConnection.targetEndpoint;

                        //                        thisEndpoint.detach(thisConnection);
                        //                        thisEndpoint.detachAll();
                        //                        thisEndpoint.detachFrom(targetEndpoint);

                        //                        thisEndpoint = connectionsDict[0].endpoints[0].endpoint;
                        //                        jsPlumb.removeEndpoint(parId, thisEndpoint);
                        //                        jsPlumb.removeAllEndpoints(data.sourceId);

                        //                    }               
                    }

                    GetChildObjects($("#del-menu").attr("clickid"));
                    jsPlumb.repaintEverything();
                }
                else if (target == "aQuit") {
                    $("#del-menu").hide();
                }
                else {
                    alert("detail");
                }
            });


        });     

    </script>
    <style>
        #demo-frame
        {
            border: 1px solid #DDDDDD;
            clear: right;
            height: 500px;
            overflow-x: auto;
            position: relative; /* width: 520px;*/
        }
        
        .div
        {
            /*  background-color: Aqua;*/
            border: 1px solid #DDDDDD;
            height: 15x;
            margin: 15px 20px 15px 20px;
            padding: 0.5em;
            cursor: pointer;
            font-family: Verdana;
            font-size: 10px;
            background-color: #C5DBEC;
        }
        .box
        {
            background: none repeat scroll 0 0 #666666;
            color: #EEEEEE;
            font-size: 20px;
            font-weight: bold;
            margin: 5px 0;
            padding: 20px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="rel-frame">
        <div id="container_0" style="float: left;">
        </div>
        <div style="border: 1px solid rgb(0, 0, 0); padding: 10px; display: none; position: absolute;
            background-color: rgb(238, 238, 238); font-weight: bold;" id="del-menu">
            <a href="#" id="aRemove" style="list-style-type: none;" class="context-menu-item">Remove</a><br />
            <a href="#" id="aDetail" style="list-style-type: none;" class="context-menu-item">Details</a><br />
            <a href="#" id="aQuit" style="list-style-type: none;" class="context-menu-item">Quit</a>
        </div>
    </div>
    <%-- <ul class="context-menu-list  context-menu-root" style="width: 120px; top: 266px;
            left: 619px; z-index: 1; display: none;" id="test">
            <li class="context-menu-item  icon icon-edit"><a href="#" id="aRemove" style="list-style-type: none;">Remove</a></li>
            <li class="context-menu-item  icon icon-cut"> <a href="#" id="aDetail" style="list-style-type: none;">Detail</a></li>
            <li class="context-menu-item  icon icon-quit"><span>Quit</span></li>
        </ul></div>--%>
    <%--  <div id="Div11" style="border: 1px solid red">
        <div class="demo" style="float: left;">
            <div id="Div4" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Aqua; padding: 0.5em; height: 30px;">
                <p>
                    Maharashtra
                </p>
            </div>
            <div id="Div5" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Coral; padding: 0.5em; height: 30px;">
                <p>
                    Gujrat
                </p>
            </div>
            <div id="Div6" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Aqua; padding: 0.5em; height: 30px;">
                <p>
                    Delhi
                </p>
            </div>
        </div>
        <div class="demo" style="float: left;">
            <div id="Div3" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Aqua; padding: 0.5em; height: 30px;">
                <p>
                    Maharashtra
                </p>
            </div>
            <div id="draggable" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Goldenrod;">
                <p>
                    Mumbai</p>
            </div>
            <div id="Divg" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Goldenrod; height: 30px; padding: 0.5em;">
                <p>
                    Nashik</p>
            </div>
            <div id="Div7" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Aqua; padding: 0.5em; height: 30px;">
                <p>
                    Gujrat
                </p>
            </div>
            <div id="draggable2" class="ui-widget-content" style="border: 1px solid #DDDDDD;
                background-color: Goldenrod; margin: 10px;">
                <p>
                    ahmedabad</p>
            </div>
        </div>
        <!-- End demo -->
        <div id="2" style="float: left;">
            <div id="Div8" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Goldenrod;">
                <p>
                    Mumbai</p>
            </div>
            <div id="Div1" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: FloralWhite; height: 30px; padding: 0.5em;">
                <p>
                    Chembur</p>
            </div>
            <div id="Div2" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: FloralWhite; height: 30px; padding: 0.5em;">
                <p>
                    Lower parel</p>
            </div>
            <div id="Div9" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Goldenrod;">
                <p>
                    Nashik</p>
            </div>
            <div id="Div10" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: FloralWhite;">
                <p>
                    Trimbakeshwar</p>
            </div>
        </div>
    </div>--%>
    </form>
</body>
</html>
